<html>
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>记一次为网站提速的经历 | 途读</title>
<link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/dyxang/myblog/favicon.ico?v=1603516677950">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dyxang/myblog/styles/main.min.css">
<link rel="alternate" type="application/atom+xml" title="记一次为网站提速的经历 | 途读 - Atom Feed" href="https://1inn.now.sh/atom.xml">
<link rel="stylesheet" href="https://fonts.lug.ustc.edu.cn/css?family=Droid+Serif:400,700">
    <meta name="description" content="未经优化的博客访问速度总是不太理想，在搬到 Github 后速度明显下降，在折腾过程中查找了许多资料如何让博客加速，记录一下方法。虽然本文环境是在 GitHub Pages+Gridea 下演示的，同时有诸多原因使网站速度变慢（网速、地理位..." />
    <meta name="keywords" content="博客,技术" />
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.3/build/highlight.min.js"></script>
  </head>
  <body>
    <div class="main">
      <div class="main-content">
        <div class="site-header">
  <a href="https://1inn.now.sh">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid meet">
<g id="layer101" fill="#202020" stroke="none">
<path d="M376 989 c-57 -14 -102 -45 -138 -96 -59 -86 -68 -163 -48 -403 5 -63 7 -116 5 -118 -3 -3 -28 -9 -57 -13 -58 -9 -103 -44 -93 -72 4 -9 36 -26 71 -37 79 -27 115 -56 143 -116 12 -25 40 -65 63 -90 l41 -44 125 0 c123 0 127 1 154 27 20 19 28 37 28 60 0 67 -33 101 -181 186 -75 44 -123 30 -78 -21 22 -25 24 -34 21 -125 -3 -94 -3 -97 -26 -97 -34 0 -79 46 -114 117 -33 65 -77 109 -120 120 -15 3 -43 13 -62 21 -26 11 -31 16 -19 22 29 17 182 31 375 35 203 4 291 -5 333 -32 20 -13 22 -20 17 -56 -10 -61 -46 -134 -99 -200 -45 -55 -46 -57 -22 -57 34 0 117 119 146 210 19 59 20 70 8 96 -8 16 -23 33 -35 38 -22 10 -27 48 -54 366 -13 154 -72 253 -167 279 -45 13 -163 13 -217 0z m234 -44 c50 -26 93 -90 104 -155 7 -39 45 -414 43 -416 -1 -1 -63 2 -137 6 -74 4 -137 7 -140 5 -8 -5 -240 -15 -240 -11 0 3 -3 12 -7 22 -5 14 -3 16 11 11 25 -10 155 19 177 39 30 27 24 53 -17 70 -39 16 -76 13 -137 -13 -20 -9 -40 -14 -43 -11 -3 3 -5 72 -5 152 0 155 4 172 58 244 30 40 72 62 138 72 62 10 162 2 195 -15z m-210 -464 c0 -15 -20 -24 -66 -31 -36 -6 -43 -4 -47 11 -6 21 9 26 71 28 23 0 42 -3 42 -8z m168 -328 c46 -35 45 -78 -3 -99 -70 -29 -75 -24 -75 66 0 80 0 81 23 69 12 -6 37 -22 55 -36z"/>
<path d="M591 519 c-52 -16 -81 -39 -81 -65 0 -31 27 -44 89 -44 100 0 171 54 128 97 -19 19 -91 25 -136 12z m119 -37 c0 -20 -28 -32 -77 -32 -37 0 -53 4 -53 13 0 8 3 17 7 20 9 10 123 9 123 -1z"/>
</g>
<g id="layer102" fill="#595959" stroke="none">
<path d="M376 989 c-57 -14 -102 -45 -138 -96 -59 -86 -68 -163 -48 -403 5 -63 7 -116 5 -118 -3 -3 -28 -9 -57 -13 -58 -9 -103 -44 -93 -72 4 -9 36 -26 71 -37 81 -27 112 -54 147 -123 41 -80 87 -120 141 -123 35 -2 45 1 49 15 3 14 11 18 33 14 19 -3 25 -2 16 5 -9 6 -12 31 -10 86 l3 78 50 -34 c41 -27 51 -39 53 -66 3 -28 -1 -34 -30 -48 l-33 -15 33 6 c27 6 32 4 32 -13 0 -11 -6 -23 -13 -25 -6 -3 -3 -6 7 -6 33 -2 76 48 76 86 0 67 -33 101 -181 186 -75 44 -123 30 -78 -21 22 -25 24 -34 21 -125 -3 -94 -3 -97 -26 -97 -34 0 -79 46 -114 117 -33 65 -77 109 -120 120 -15 3 -43 13 -62 21 -26 11 -31 16 -19 22 29 17 182 31 375 35 203 4 291 -5 333 -32 20 -13 22 -20 17 -56 -10 -61 -46 -134 -99 -200 -45 -55 -46 -57 -22 -57 34 0 117 119 146 210 19 59 20 70 8 96 -8 16 -23 33 -35 38 -22 10 -27 48 -54 366 -13 154 -72 253 -167 279 -45 13 -163 13 -217 0z m234 -44 c50 -26 93 -90 104 -155 7 -39 45 -414 43 -416 -1 -1 -63 2 -137 6 -74 4 -137 7 -140 5 -8 -5 -240 -15 -240 -11 0 3 -3 12 -7 22 -5 14 -3 16 11 11 25 -10 155 19 177 39 30 27 24 53 -17 70 -39 16 -76 13 -137 -13 -20 -9 -40 -14 -43 -11 -3 3 -5 72 -5 152 0 155 4 172 58 244 30 40 72 62 138 72 62 10 162 2 195 -15z m-210 -464 c0 -15 -20 -24 -66 -31 -36 -6 -43 -4 -47 11 -6 21 9 26 71 28 23 0 42 -3 42 -8z m-130 -37 c0 -8 -9 -14 -20 -14 -11 0 -20 7 -20 15 0 8 5 15 11 15 5 0 7 6 3 13 -5 8 -2 8 9 -2 9 -7 17 -20 17 -27z"/>
<path d="M540 799 c-19 -5 -90 -12 -157 -15 -90 -5 -123 -11 -123 -20 0 -24 20 -25 171 -9 147 15 189 25 189 45 0 12 -32 11 -80 -1z"/>
<path d="M437 654 c-6 -6 -1 -72 9 -123 5 -22 7 -22 20 -9 12 12 14 27 7 73 -7 54 -20 75 -36 59z"/>
<path d="M591 519 c-52 -16 -81 -39 -81 -65 0 -31 27 -44 89 -44 100 0 171 54 128 97 -19 19 -91 25 -136 12z m119 -37 c0 -20 -28 -32 -77 -32 -37 0 -53 4 -53 13 0 8 3 17 7 20 9 10 123 9 123 -1z m-146 -11 c8 -13 -4 -42 -15 -35 -12 7 -12 44 0 44 6 0 12 -4 15 -9z"/>
</g>
</svg>
  </a>
  <h1 class="site-title webfont">
    途读
  </h1>
  <p class="site-description webfont">
    我的小站
  </p>
  <div class="menu-container webfont">
    
      
        <a href="/" class="menu">
          主页面
        </a>
      
    
      
        <a href="/post/about/" class="menu">
          关于我
        </a>
      
    
      
        <a href="/post/peng-you/" class="menu">
          朋友们
        </a>
      
    
      
        <a href="/tags/" class="menu">
          云标签
        </a>
      
    
      
        <a href="/archives/" class="menu">
          总归档
        </a>
      
    
  </div>
  <div class="social-container">
    
      
    
      
    
      
    
      
    
      
    
  </div>
</div>

        <div class="post-detail">
          <article class="post">
            <h2 class="post-title">
              记一次为网站提速的经历
            </h2>
            <div class="post-info">
              <span>
                2020-04-27
              </span>
              <span>
                7 min read
              </span>
              
                <a href="https://1inn.now.sh/tag/bo-ke/" class="post-tag">
                  # 博客
                </a>
              
                <a href="https://1inn.now.sh/tag/rGLdBibQG/" class="post-tag">
                  # 技术
                </a>
              
            </div>
            
              <img class="post-feature-image" src="https://i.loli.net/2020/06/11/CIN9FeRqQKEZaMH.jpg" alt="">
            
            <div class="post-content-wrapper">
              <div class="post-content">
                <p>未经优化的博客访问速度总是不太理想，在搬到 Github 后速度明显下降，在折腾过程中查找了许多资料如何让博客加速，记录一下方法。虽然本文环境是在 GitHub Pages+Gridea 下演示的，同时有诸多原因使网站速度变慢（网速、地理位置、网页渲染等），不过这些方法也适用于动态网站。</p>
<p>已发布在<a href="https://sspai.com/post/60312">少数派|我对网站进行提速的技巧</a> ，优化排版并作了文章更新</p>
<!-- more -->
<p>全文从多个方面（主要涉及到源码改造）列举提速方法，内容较多可挑选自己关注的阅读。在涉及博客源码改造的部分一定要记住<strong>备份与预先测试</strong></p>
<h1 id="dns-域名解析服务">DNS 域名解析服务</h1>
<p>在访问网站之前是需要 DNS 域名解析的，若是绑定了自己购买的一级域名，而 DNS 解析服务没有选择好的话，同样会拖慢网站打开速度，所以一定要选择适合的大厂 DNS 域名解析服务。</p>
<h1 id="前端公共库-cdn">前端公共库 CDN</h1>
<p>独有资源（例如个人图片）的 CDN 设置建议看少数派的这篇文章《 <a href="https://sspai.com/post/60103">进阶指南 | 如何让你的静态网站极速打开</a> 》，网站总会引用一些外链资源（css、js 文件），在浏览器的下按 F12 打开控制台中的 Network，进入网站后即可看到加载了多少文件，或者在网站主页右键查看源码，而这些资源大部分是知名的开源项目，那么就可以通过替换 CDN 链接来达到加速效果。</p>
<center>
    <img style="border-radius: 0.3125em;
    box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);" 
    src="https://i.loli.net/2020/05/03/AEycud9mYQsNMLK.png">
    <br>
    <div style="color:orange; border-bottom: 1px solid #d9d9d9;
    display: inline-block;
    color: #999;
    padding: 2px;">通过控制台查看加载资源与速度</div>
</center>
<center>
    <img style="border-radius: 0.3125em;
    box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);" 
    src="https://i.loli.net/2020/05/03/qWw8h3EuxiMgGUb.png">
    <br>
    <div style="color:orange; border-bottom: 1px solid #d9d9d9;
    display: inline-block;
    color: #999;
    padding: 2px;">某博客源码中引用的公共服务与著名开源项目</div>
</center>
<center>
    <img style="border-radius: 0.3125em;
    box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);" 
    src="https://i.loli.net/2020/05/03/uXSDwjMc96fTN4b.png">
    <br>
    <div style="color:orange; border-bottom: 1px solid #d9d9d9;
    display: inline-block;
    color: #999;
    padding: 2px;">在国内的 CDN 前端公共库 jquery 服务，bootcdn</div>
</center>
<p>挑选适合自己的 CDN 建议看这篇文章 <a href="https://www.v2ex.com/t/480330">《以全新的视角来评测公共 CDN》</a> ，要记住 Ping 和 IP 数量并不是衡量公共数据的标准，这里以建立 SM.MS 图床的开发者提供的 CDN 服务来做示例，该服务提供了前端 CDNJS 库及 Google Fonts、Ajax 和 Gravatar 的国内加速。用法十分简单，比如 Google Fonts 的网址 fonts.googleapis.com 替换为 fonts.loli.net，如</p>
<pre><code class="language-html">&lt;link href='https://fonts.googleapis.com/css?family=字体名称' rel='stylesheet'&gt;//修改前
&lt;link href='https://fonts.loli.net/css?family=字体名称' rel='stylesheet'&gt;//修改后
</code></pre>
<p>还支持替换的域名有 cdnjs.cloudflare.com、ajax.googleapis.com、*.gravatar.com 等等，更多内容见 <a href="https://sb.sb/blog/css-cdn/">官方博客</a></p>
<h1 id="异步加载-懒加载">异步加载、懒加载</h1>
<p>由于某些文件体积过大，在网页载入时造成阻塞使后面的内容迟迟得不到加载和渲染造成问题（网页白屏等）。这种情况下就可以使一些不关键文件延时加载或者浏览才加载，浏览微信文章时，阅读到有图片的部分图片才加载就是使用的懒加载。</p>
<h2 id="脚本文件异步加载">脚本文件异步加载</h2>
<p>将<code>&lt;script&gt;</code>放到<code>&lt;body&gt;</code>底部，不会造成页面解析的阻塞，就算加载时间过长也能看到页面而不是一片空白，这种方式适合不讲就解析步奏的脚本文件。而另一种方式则是利用 html5 的 defer 属性，给<code>&lt;script&gt;</code>标签设置 defer 属性，将脚本文件设置为延迟加载。注意只适合外部 js 引用，添加 defer 属性的 js 文件不能使用 <code>document.write</code> 方法。<br>
例如：</p>
<pre><code class="language-js">&lt;script src=&quot;https://example.com/xxx.js&quot; type=&quot;text/javascript&quot; defer&gt;&lt;/script&gt;//空格后添加了 defer
</code></pre>
<p>这两种办法适用于 非关键/无需顺序渲染 的脚本文件，若是不知道自己的脚本是否属于范围内，最好先备份然后测试一下。除此之外的另一种方法就不展开了，可以用关键字搜索“动态创建<code>&lt;script&gt;</code>标签”。</p>
<h2 id="媒体资源懒加载">媒体资源懒加载</h2>
<p>不同的静态网站生成程序都有配套的插件，例如 Hexo、Hugo，这里就不详细说明，依个人情况来修改。主要谈一下网络字体的懒加载——因为汉字大量的字符让字体的体积异常庞大。就好比字体渲染时，英文只需拿一张字母表在上面找，而中文需要拿一本厚厚的字典一个字一个字去找，所以懒加载很有必要。修改方法如下</p>
<pre><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css?family=字体名称&quot;&gt;//修改前
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css?family=字体名称&amp;display=swap&quot; media=&quot;print&quot; onload=&quot;this.media='all'&quot;&gt;//修改后
</code></pre>
<center>
    <img style="border-radius: 0.3125em;
    box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);" 
    src="https://i.loli.net/2020/05/03/DUAHmPRoj1x9FKy.png">
    <br>
    <div style="color:orange; border-bottom: 1px solid #d9d9d9;
    display: inline-block;
    color: #999;
    padding: 2px;">使用懒加载后的谷歌字体载入速度，来自网络</div>
</center>
<p>当然，若仅仅想让固定的一段文字渲染成网络字体，可以试试 Iconfont 的 <a href="https://www.iconfont.cn/webfont">webfont服务</a></p>
<h1 id="扩展改造项目">扩展改造项目</h1>
<p>以下内容适用于对速度极其追求的人</p>
<h2 id="修改网站上的图标">修改网站上的图标</h2>
<p>如果你的网站所用的图标并不算多，推荐使用 svg 代码代替引用外部资源，例如在 <a href="https://remixicon.com/">Remix Icon</a> 官网中就可以直接复制 svg 代码。把代码粘贴到需要展示的位置即可</p>
<center>
    <img style="border-radius: 0.3125em;
    box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);" 
    src="https://i.loli.net/2020/05/03/CPErRJbMtGsFiOV.png">
    <br>
    <div style="color:orange; border-bottom: 1px solid #d9d9d9;
    display: inline-block;
    color: #999;
    padding: 2px;">Remixicon</div>
</center>
<h2 id="instantpage">instant.page</h2>
<p>很多浏览器都有“智能预加载”的设置，原理就是提前加载鼠标点击/悬停着的链接，减少人为的点击延迟，达到加速的效果，而 <a href="https://instant.page/">instant.page</a> 就是这么一个网站预加载的脚本。只要在一个链接上犹豫超过超过 65ms，开始预加载，当然相对的流量也会增多。</p>
<center>
    <img style="border-radius: 0.3125em;
    box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);" 
    src="https://i.loli.net/2020/05/03/J75tX3iwFcoDkas.png">
    <br>
    <div style="color:orange; border-bottom: 1px solid #d9d9d9;
    display: inline-block;
    color: #999;
    padding: 2px;">很多著名网站也在使用</div>
</center>
<p>这里推荐使用 <a href="https://www.jsdelivr.com/package/gh/instantpage/instant.page">JsDelivr</a> 的 CDN 而不是官方的，原因是官方使用 Cloudflare Workers（无国内节点）。粘贴以下内容到<code>&lt;body&gt;</code>标签前即可。</p>
<pre><code class="language-js">&lt;script src=&quot;https://cdn.jsdelivr.net/gh/instantpage/instant.page@3.0.0/instantpage.min.js&quot;&gt;&lt;/script&gt;
</code></pre>
<h2 id="代码压缩">代码压缩</h2>
<p>通过压缩代码减少换行可以节省浏览器的读取时间，而我使用的是 OSChina 的在线压缩，最好把 html css javascript 分开压缩，避免一些极限压缩对代码完整性的破坏。一定要在所有改造工作做完后进行压缩，并且要留一份压缩前的备份。</p>
<center>
    <img style="border-radius: 0.3125em;
    box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);" 
    src="https://i.loli.net/2020/05/03/NDiIlPwtjKnTmqZ.png">
    <br>
    <div style="color:orange; border-bottom: 1px solid #d9d9d9;
    display: inline-block;
    color: #999;
    padding: 2px;">OSCHINA</div>
</center>
<h2 id="service-worker">Service Worker</h2>
<p>作为支撑 PWA（渐进式 Web 应用）的一部分，我们只需要了解，给网站加上 Service Worker，就相当于告诉访客的浏览器“这个网站的 XXX 文件需要一直缓存”，只要访客不清除浏览器的数据，下次访问你的网站时 XXX 文件直接从本地载入，大大提高速度。关于配置，可以看延伸文章 <a href="https://wangdaodao.com/20190111/service-worker.html">《给博客加上Service Worker》</a></p>
<h1 id="改造收尾的验收">改造收尾的验收</h1>
<p>改造完成后，使用谷歌 <a href="https://developers.google.com/speed/pagespeed/insights/?hl=zh-cn">PageSpeed Insights</a> 来给网站诊断（还能提出改进建议），或者在电脑端浏览器按 F12 打开控制台&gt;性能来查看网站速度。</p>
<center>
    <img style="border-radius: 0.3125em;
    box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);" 
    src="https://i.loli.net/2020/05/03/YHKg9Dbfe52w1yU.png">
    <br>
    <div style="color:orange; border-bottom: 1px solid #d9d9d9;
    display: inline-block;
    color: #999;
    padding: 2px;">PageSpeed Insights 给我的博客评分</div>
</center>
<center>
    <img style="border-radius: 0.3125em;
    box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);" 
    src="https://i.loli.net/2020/05/03/zUditqZx9XM72RP.png">
    <br>
    <div style="color:orange; border-bottom: 1px solid #d9d9d9;
    display: inline-block;
    color: #999;
    padding: 2px;">进入控制台进行测试</div>
</center>
<center>
    <img style="border-radius: 0.3125em;
    box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);" 
    src="https://i.loli.net/2020/05/03/5G723jWYvBXDgHE.png">
    <br>
    <div style="color:orange; border-bottom: 1px solid #d9d9d9;
    display: inline-block;
    color: #999;
    padding: 2px;">测试结果</div>
</center>
              </div>
              <div class="toc-container">
                <ul class="markdownIt-TOC">
<li><a href="#dns-%E5%9F%9F%E5%90%8D%E8%A7%A3%E6%9E%90%E6%9C%8D%E5%8A%A1">DNS 域名解析服务</a></li>
<li><a href="#%E5%89%8D%E7%AB%AF%E5%85%AC%E5%85%B1%E5%BA%93-cdn">前端公共库 CDN</a></li>
<li><a href="#%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD-%E6%87%92%E5%8A%A0%E8%BD%BD">异步加载、懒加载</a>
<ul>
<li><a href="#%E8%84%9A%E6%9C%AC%E6%96%87%E4%BB%B6%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD">脚本文件异步加载</a></li>
<li><a href="#%E5%AA%92%E4%BD%93%E8%B5%84%E6%BA%90%E6%87%92%E5%8A%A0%E8%BD%BD">媒体资源懒加载</a></li>
</ul>
</li>
<li><a href="#%E6%89%A9%E5%B1%95%E6%94%B9%E9%80%A0%E9%A1%B9%E7%9B%AE">扩展改造项目</a>
<ul>
<li><a href="#%E4%BF%AE%E6%94%B9%E7%BD%91%E7%AB%99%E4%B8%8A%E7%9A%84%E5%9B%BE%E6%A0%87">修改网站上的图标</a></li>
<li><a href="#instantpage">instant.page</a></li>
<li><a href="#%E4%BB%A3%E7%A0%81%E5%8E%8B%E7%BC%A9">代码压缩</a></li>
<li><a href="#service-worker">Service Worker</a></li>
</ul>
</li>
<li><a href="#%E6%94%B9%E9%80%A0%E6%94%B6%E5%B0%BE%E7%9A%84%E9%AA%8C%E6%94%B6">改造收尾的验收</a></li>
</ul>

              </div>
            </div>
          </article>
        </div>

        
          <div class="next-post">
            <div class="next">下一篇</div>
            <a href="https://1inn.now.sh/post/bo-ke-gai-dong-yu-zhi-hou-de-shi-qing/">
              <h3 class="post-title">
                博客改动与之后的事情
              </h3>
            </a>
          </div>
        
<hr>
        
          <div class="next-post">
            <div class="next">上一篇</div>
            <a href="https://1inn.now.sh/post/fang-ke-bi-du-qian-yi-dao-liao-github/">
              <h3 class="post-title">
                【访客必读】迁移到了Github
              </h3>
            </a>
          </div>
        
        
          

          
            <div id="talkmoe"></div>
<script type="text/javascript">
loadComments();
function loadComments() {
  if (typeof Valine === 'undefined') {
    var getScript = (options) => {
      var script = document.createElement('script');
      script.defer = true;
      script.crossOrigin = 'anonymous';
      Object.keys(options).forEach((key) => {
          script[key] = options[key];
      });
      document.body.appendChild(script);
    };
    getScript({
      src: 'https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js',
      onload: () => {
        newValine();
      }
    });
  } else {
    newValine();
  }
}
function newValine() {
  new Valine({
      el: '#talkmoe',
      appId: 'TOr2oui8CqeHKy9pdTy1MRda-MdYXbMMI',
      appKey: 'TM40Df21wNjaSXeCla4jVeNH',
      placeholder:'Hello!(ovo) 留下你的足迹吧 ！'
  });
}
</script>
          
        

        <div class="site-footer webfont">
  坚持写作，源自二零一五<script src="https://cdn.jsdelivr.net/gh/instantpage/instant.page/instantpage.min.js"></script>
&nbsp;<img src="https://img.shields.io/badge/dynamic/json?url=https://www.v2ex.com/api/members/show.json?username=dyxang&label=%E7%8A%B6%E6%80%81&query=$.bio&color=2edfa3&style=flat-square&colorA=0aa344" />&nbsp;<img src="https://img.shields.io/badge/dynamic/json?colorA=395260&label=%E5%8D%9A%E4%B8%BB&prefix=%E6%9B%BE%E5%9C%A8&query=%24.tagline&suffix=%E6%9D%A5%E8%BF%87&url=https%3A%2F%2Fwww.v2ex.com%2Fapi%2Fmembers%2Fshow.json%3Fusername%3Ddyxang&style=flat-square&color=7397ab" />
  <a class="rss" href="https://1inn.now.sh/atom.xml" target="_blank">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 3c9.941 0 18 8.059 18 18h-3c0-8.284-6.716-15-15-15V3zm0 7c6.075 0 11 4.925 11 11h-3a8 8 0 0 0-8-8v-3zm0 7a4 4 0 0 1 4 4H3v-4z"/></svg> RSS
  </a>
</div>

      </div>
    </div>

    <script>
      hljs.initHighlightingOnLoad()

      let mainNavLinks = document.querySelectorAll(".markdownIt-TOC a");


      window.addEventListener("scroll", event => {
        let fromTop = window.scrollY;

        mainNavLinks.forEach((link, index) => {
          let section = document.getElementById(decodeURI(link.hash).substring(1));
          let nextSection = null
          if (mainNavLinks[index + 1]) {
            nextSection = document.getElementById(decodeURI(mainNavLinks[index + 1].hash).substring(1));
          }
          if (section.offsetTop <= fromTop) {
            if (nextSection) {
              if (nextSection.offsetTop > fromTop) {
                link.classList.add("current");
              } else {
                link.classList.remove("current");    
              }
            } else {
              link.classList.add("current");
            }
          } else {
            link.classList.remove("current");
          }
        });
      });

    </script>
  </body>
</html>